<script  setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const returnMain = () => {
  router.push({
    path:'/Main',
  })
}
</script>
<template>
  <div class="main-container">
    <div class="form-container">
      <el-steps style="max-width: 600px ;margin: 0 auto;"  :active="3" finish-status="success" align-center>
        <el-step title="选择编号" description="选择出差编号" />
        <el-step title="提交报销" description="提交报销申请" />
        <el-step title="报销申请完成" description="报销成功" />
      </el-steps>
      <el-divider />
      <div style="font-size: 25px; color: #009dff; font-weight: bolder; width: 100%; text-align:center; margin: 0 0 20px 0">申 请 报 销 成 功</div>
      <el-result
          icon="success"
          title="报销申请提交成功"
          sub-title="等待1-7个工作日后申请审批完成"
      >
        <template #extra>
          <el-button type="primary" @click = "returnMain()">返回主页</el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<style>
.main-container{
  width: 100%;
}
.form-container{
  margin: 10px auto auto;
  width: 50%;
  padding: 2% 5%;
  border-radius: 20px;
  box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
  -webkit-box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
  -moz-box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
}
.form{
  margin: 0 auto;
  padding: 0 5%;
}
.button{
  margin: 0 auto;
}
</style>